import * as echarts from 'echarts'
import 'echarts/map/js/china'
import chinaMapData from 'echarts/map/json/china.json'
import { useEffect, useRef, useState } from 'react'
import '../PieChart/index.scss'
export default function DistributionDiagram({ dataList }) {
    const graphRef = useRef(null)
    const [myChart, setMyChart] = useState()
    const colors = ['#165DFF', '#2CB8C5', '#F0B114', '#885BD2', '#B6D8F3']
    let timer = useRef(null)
    const resizeObserver = new ResizeObserver(entries => {
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            myChart && myChart.resize();
        }, 100)
    });
    useEffect(() => {
        setMyChart(echarts.init(graphRef.current))
    }, [])
    const renderChart = () => {
        echarts.registerMap('china', chinaMapData)
        const option = {
            title: {
                text: '对手数量(家)',
                textStyle: {
                    color: 'rgba(28, 31, 35, 0.80)',
                    fontSize: '12px',
                    fontWeight: 'normal'
                },
                top: "20",
                left: '0'
            },
            tooltip: {
                // triggerOn: "click",
                padding: 0,
                borderWidth: 0,
                formatter: function (e, t, n) {
                    // return '.5' == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
                    return `<div class="tooltip-area"><p>${e.marker}${e.name}</p><h4>${e.value}</h4></div>`
                }
            },
            visualMap: {
                // min: 0,
                // max: 1000000,
                left: 0,
                bottom: 0,
                showLabel: true,
                inRange: {
                    color: ['rgba(0, 119, 250, 0.10)',
                        'rgba(0, 119, 250, 0.20)',
                        'rgba(0, 119, 250, 0.40)',
                        'rgba(0, 119, 250, 0.60)', 'rgba(0, 119, 250, 0.80)']
                },
                text: ["高", "低"],
                show: true
            },
            geo: {
                map: "china",
                roam: true,
                scaleLimit: {
                    min: 1,
                    max: 2
                },
                zoom: 1.13,
                top: 50,
                label: {
                    show: true,
                    fontSize: "12",
                    color: "#003d8f"
                },
                itemStyle: {
                    borderColor: "rgba(0, 0, 0, 0.2)"
                },
                emphasis: {
                    areaColor: "#f2d5ad",
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    borderWidth: 0
                }
            },
            series: [{
                name: "",
                type: "map",
                geoIndex: 0,
                data: dataList
            }]
        };

        option && myChart.setOption(option);
    }
    useEffect(() => {
        // 保证dom可用 才进行图表的渲染
        myChart && renderChart()
        resizeObserver.observe(graphRef.current);
        return () => resizeObserver.disconnect();
    }, [myChart, dataList])
    return (
        <div ref={graphRef} style={{ width: '100%', height: '100%' }}></div>
    )
}
